:root {
    --0-2-rem: 0 2rem;
    --0-3-rem: 0 3rem;
    --0-5-rem: 0 5rem;
    --0-8-rem: 0 8rem;
    --0-10-rem: 0 10rem;
    --n: none;
    --port: #ffb600;
    --quota: #f26b55;
    --admission: #00a0a9;
}

body{
    margin: var(--0-2-rem);
    padding: 0;
    font-family: "Kanit", serif;
    width: -webkit-fill-available;
}

@media (min-width: 960px) {
    body {
      margin: var(--0-5-rem);
    }
}

@media (min-width: 1120px) {
    body {
      margin: var(--0-8-rem);
    }
}

@media (min-width: 1280px) {
    body {
      margin: var(--0-10-rem);
    }
}

.navbar {
    display: flex;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    padding-left: 40px;
}

a {
    text-decoration: none;
    color: unset;
}

header {
    width: auto;
    color: #e6272b;
}


nav ul {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 40px;
}

li {
    list-style: none;
}


a.button {
    background: #0007c0;
    color: #fff;
    padding: 12px 16px;
    border-radius: 5px;
    transition: 0.3s;
}

a.button:hover {
    background: #00058e;
    color: #fff;
}

.important-dates li {
    padding: 12px;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    margin: -12px 0;
}

.important-dates li span.port {
    background: #ffb600;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 12px;
    width: 105px;
}

.important-dates li span.quota {
    background: #f26b55;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 12px;
    width: 105px;
}

.important-dates li span.admission {
    background: #00a0a9;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 12px;
    width: 105px;
}

.important-dates li a {
    padding: 23px 12px;
    width: -webkit-fill-available;
    border: 1px solid;
    transition: left 0.3s ease-out, color 0.3s ease;
}

.important-dates li a#port:hover{
    color: #ffb600;
    background-color: #fff8ea;
    padding: 24px 12px;
     border: none; 
}

.important-dates li a#quota:hover{
    color: #f26b55;
    background-color: #ffefef;
    padding: 24px 12px;
     border: none; 
}

.important-dates li a#admission:hover{
    color: #00a0a9;
    background-color: #eefeff
    padding: 24px 12px;
     border: none; 
}