body{
    font-family:Arial;
    background-color :#191719;
    padding: 25px; 
    line-height: 1.5;
}

header{ 
    margin-bottom: 12px; 
    font-weight: 650;
    border-bottom: 1px solid #8BBFC4;
    } 

h1{
        margin: 0 0 8px 0; 
        font-size: 38px;
        color: #14b3db;
        text-shadow: 0px 0px 8px #000000;
}

.subtitle{
    font-size:18px;
    color:#8BBFC4;
    font-family:Arial;
    margin: 8px 0px;
}
    

.header{
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #14b3db70;
    border-radius: 65px;
    background: linear-gradient(135deg, rgba(27, 79, 122, 0.438), rgba(16, 149, 167, 0.575));
    padding: 12px 15px;
    margin-bottom: 18px;
    width: 375px;
    transform : rotateX(8deg);
    transition : all 0.5s ease;
    box-shadow: 0px 3px 18px rgba(9, 94, 116, 0.377);
}

@keyframes header-hover-glow {
    0% { 
        box-shadow: 0px 3px 25px rgba(12, 145, 168, 0.466);
        border-color: #11beca77;
    }
    100% { 
        box-shadow: 0px 3px 25px rgb(0, 225, 255);
        border-color: #0ee2f1;
    }
}

.header:hover{
    border: 3px solid #0ee2f1;
    background: linear-gradient(135deg, rgba(33, 116, 184, 0.555), rgba(22, 159, 184, 0.637));
    box-shadow: 0px 3px 18px rgba(7, 207, 214, 0.938);
    transform: rotateX(0deg) scale(1.03);
    animation: header-hover-glow 1s infinite alternate;
}


main{
    padding-top: 15px;
}

@keyframes info-glow {
    0% { 
        box-shadow: 0px 2px 21px rgba(7, 156, 167, 0.315);
        border-color: #14b3db70;
    }
    100% { 
        box-shadow: 0px 2px 32px rgba(9, 213, 240, 0.877);
        border-color: #10c3e2ad;
    }
}

.circuit-calc-info{
    border: 3px solid #14b3db70;
    font-weight: 550;
    font-family:Arial;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(27, 79, 122, 0.438), rgba(16, 149, 167, 0.575));
    padding: 20px 30px 5px 30px;
    margin-top: 3px;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    width: 625px;
    box-shadow: 0px 5px 20px rgba(7, 156, 167, 0.315);
    animation: info-glow 3s infinite alternate;
}

.info1-title{
    font-size:35px;
    color:#9ebdc7;
    margin: 8px 0px;
    text-shadow: 0px 2px 5px #000000;
}
.info1-text{
    display: flex;
    font-size:15px;
    color:#ccc1c1d5;
    margin: 8px 0px;
    text-shadow: 0px 2px 5px #000000;
    border-left: 3px solid #14b3db70;
    padding-left : 7px;
}

@keyframes issues-glow {
    0% { 
        box-shadow: 0px 2px 15px rgba(226, 106, 8, 0.315);
        border-color: #f37e1070;
    }
    100% { 
        box-shadow: 0px 2px 28px rgba(223, 6, 6, 0.877);
        border-color: #f12d13de;
    }
}

.cir-calc-knownissues-info{
    display : none;
    border: 3px solid #e91c1598;
    border-radius: 23px;
    background: linear-gradient(135deg, rgba(179, 61, 25, 0.644), rgba(158, 41, 21, 0.808));
    padding: 20px 20px;
    margin-top: 18px;
    margin-left: auto;
    margin-right: auto;
    width: 525px;
    animation: issues-glow 5s infinite alternate;
}

.cir-calc-knownissues-info:hover{
    border: 3px solid #f12d13de;
    background: linear-gradient(135deg, rgba(231, 66, 16, 0.829), rgba(223, 40, 16, 0.808));
    box-shadow: 0px 5px 20px rgba(223, 6, 6, 0.877);
    transform: translateY(-5px);
    transition: all 0.2s ease;
}

.info2-title{
    font-size:24px;
    color:#cf5148d7;
    margin: 8px 0px;
    text-shadow: 0px 2px 5px #000000;
}

.info2-text{
    display: flex;
    font-size:15px;
    color:#c46133;
    margin: 8px 0px;
    text-shadow: 0px 2px 5px #000000;
    border-left: 3px solid #ff0000;
    padding-left : 7px;
}

.download-button {
    display: flex;
    gap: 20px;
    margin: 20px 0px;
}

.download-button-first {
    background-color: #1b6274;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    transform : translateY(0px);
    transition: all 0.3s ease;
}

.download-button-first:hover {
    background-color: #0dcdfd;
    transform: translateY(-5px);
    text-shadow: 0px 0px 8px #000000;
    box-shadow: 0px 5px 12px #0b97b99c;
}

.download-button-second {
    display : none;
    background-color: #333333;
    color: white;
    padding: 10px 20px;
    margin-left: 125px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    transform: translateY(0px);
    transition: all 0.3s ease;
}

.download-button-second:hover {
    background-color: #555555;
    transform: translateY(-5px);
    text-shadow : 0px 0px 8px #000000;
    box-shadow: 0px 5px 12px #37393a9c;
}

.footer {
    text-align: center;
    font-weight: 600;
    margin-top: 60px;
    padding: 12px 0px;
    border-top: 1px solid #bff5f5;
    font-size: 12px;
    color: #9ed9dddc;
}