@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); body { background: none; } .top { display: inline-block; position: absolute; right: 0.5vh; top: -2vh; width: auto; max-width: 50vh; padding-left: 1vh; transition: all; transition-duration: 1s; } .top .box { display: flex; align-items: center; justify-content: center; gap: 2vh; max-width: 50vh; border-radius: 3vh; padding: 1vh; text-align: center; } .divider { width: 1px; height: 6.5vh; background-color: #DCDCDC; margin: 0 1vh; align-self: center; } .top .second { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-right: -1vh; margin-top: 0.2vh; } .second .name { font-family: 'Saira'; font-style: normal; font-weight: 300; font-size: 2.1vh; color: #DCDCDC; text-align: center; } .second .small { font-family: 'Roboto'; font-style: normal; font-weight: 600; font-size: 2.5vh; color: #DCDCDC; text-align: center; } .logo-section { display: flex; flex-direction: column; align-items: center; text-align: center; } .info-box { padding: 0.4vh 0.7vh; background-color: rgb(255, 255, 255); border-radius: 0.5vh; display: inline-block; font-weight: bold; } .first .label { font-family: 'Roboto'; font-weight: 400; font-size: 1.6vh; color: #DCDCDC; margin-right: 0.5vh; } .large { font-family: 'Roboto'; font-weight: 600; font-size: 1.6vh; color: #111111; } .top .logo { width: 18vh; margin-bottom: 1vh; } .top .first { display: flex; justify-content: center; gap: 1vh; margin-top: -4vh; margin-right: 2.5vh; text-align: center; } .first .info { display: flex; align-items: center; } .first img { margin-left: 1vh; }