body{
    font-family: Catamaran;
    margin: 0;
    padding: 0;
    font-size: 15px;
}
a{
    text-decoration: none;
    color:black;
}
.topSection{
    margin-top: 50px;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #171717;
    z-index: 1;
    position: fixed;
    top:0;
}

.rightHeader {
    flex: 0 0 30%;
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
}
.leftHeader{
    flex: 0 0 22%;
    margin-left: 10%;
}
.rightHeaderContent{
    display: flex;
}
.rightHeaderLinks{
    display: block;
    padding: 13px;
    font-weight: 800;
}

.rightHeaderLinks:hover{
    background: #000000;
    
}
.middleHeader {
    flex: 0 0 30%;}

.headerImages {
    display: flex;
    gap: 10px;
}

img {
    display: block;
}
.logo-svg{
    max-width: 3.5vh;
    padding: 10px;
}

.header-svg{
    max-width: 20vh;
}

h1{
    font-size: 60px;
    text-align: center;
    margin:0px;
}

h2{
    font-size: 30px;
    margin:0px;
    padding-right: 60px;
}

.topDiv{
    background: cadetblue;
    padding-top: 60px;
}
.midDiv{
    background: #fff5e2;
}
.topDiv p{
    font-size: 18px;
    width:95%;
    text-align: center;
    margin: auto;
}
p{
    font-size: 15px;
}

.midDivText{
    width:95%;
    margin: auto;
    max-width: 800px;
}

.midDivContent a{
    color:orangered;
}
.midDivContent h2{
    font-size: 35px;
}
.midDivContent a:hover{
    color:saddlebrown;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.passwordDiv{
    background-color: aliceblue;
}

.passwordDiv h3{
    margin-top: 0px;
    margin-left: 20px;
}
.top_hr{
    margin-top: -10px;
    margin-left: 20px;
    width: 90%;
}
.conditionsDiv{
    margin: auto;
    width: 273px;
}
.conditionsDiv p{font-size: 14px;}

.passwordContent{
    margin: auto;
    width:226px;
}

.passwordContent input{
    border: solid 1px sienna;
    outline: none;
    border-radius: 3px;

    padding: 5px 15px;
    width:200px;
    background-color: aliceblue;
    font-family: Catamaran;
    font-size: 14px;
    line-height: 30px;
}
.labelline{
    width: fit-content;
    font-size: 14px;
    position: relative;
    left:15px;
    top:-32px;
    background-color: aliceblue;
    transition: 0.2s ease;
    user-select: none;
    cursor:text
}
.passwordContent input:focus{
    border: solid 1px teal;
}
.passwordContent input:focus+.labelline{
    color: teal;
    transform: translate(-10px,-20px) scale(0.88);
}

.passwordContent.no-animation input:not(:focus) + .labelline {
    color: teal; 
    transform: translate(-10px, -20px) scale(0.88);
    transition: none; 
}


.progress-bar {
    margin-top: -8px;
    width: 100%;
    background-color: lightblue;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 8px;
    position: relative;
}
  
  .progress-bar-fill {
    width: 0%;
    height: 100%;
    background-color: #4caf50;
    transition: width 0.3s ease-in-out;
    border-radius: 25px 0 0 25px;
  }

.diamond {
    aspect-ratio: 1 / 1;
    margin: 0px -2px;
    background-color: #f44336;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    scale: 0.8;
}

.conditionsStatistics{
    display: flex;
    justify-content: center;
    height:40px;
    padding-left: 240px;
    transition: padding-left 0.5s ease; 
    overflow-x: hidden;
    overflow-y: hidden;
}  

#locks{
    padding: 8px;
    transition: transform 0.5s ease;
}

.passwordCheckBtn{
    float:right;
    font-family: Catamaran;
    color:black;
    background: gainsboro;
    border: solid 1px darkmagenta;
    cursor: pointer;
}

.passwordCheckBtn {
    transition: transform 0.2s ease-in-out;
}

.passwordCheckBtn:active {
    transform: scale(0.95);
}

#conditionsContent{
background: lightcyan;
font-size: 14px;
margin: 0px;
padding: 0px 10px;
}

@keyframes vibrate {
    0% { transform: translateX(0); }
    12.5% { transform: translateX(-3px); }
    25% { transform: translateX(3px); }
    37.5% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    62.5% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
    87.5% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}
.vibrate {
    animation: vibrate 0.5s linear;
}
#conditionsNumbering{
    font-family: Lato;
}

.number{font-family: Lato;}
#number{font-family: Lato;}
.rotate-and-change {
    transform: rotate(360deg);
}

.websiteInfoDiv{
    display: flex;
    background: black;
    line-height: 15px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.leftWebsiteInfo,.rightWebsiteInfo{
    float: left;
    width: 50%;
    color:white;
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    transform: translateX(-50%);
}

.rightWebsiteInfo{
    transform: translateX(50%);

}
.leftWebsiteInfo.show {
    transform: translateX(0%);
    opacity: 1;
}

.rightWebsiteInfo.show {
    transform: translateX(0%);
    opacity: 1;
}

.leftWebsitePara{
    padding: 20px;
    background: #171717;
    width: 75%;
    aspect-ratio: 4/5;
    margin: auto;
    margin-top: 30px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
}
.leftWebsitePara p{
    font-size: 14px;
}
.promptDiv{
    display: flex;
}
.leftPrompt{
    background-color: #D2242E;
    color: white;
    flex: 1;
    transition: background-color 0.5s ease;
}
.leftPrompt h1, .rightPrompt h1{
    font-size: 25px;
    text-align: center;
    min-height: 57.6px;
}

.leftPrompt a{
    display: block;
    border: solid 1px aliceblue;
    font-size: 16px;
    margin: auto;
    width: fit-content;
    padding: 10px 30px;
    border-radius: 10px;
    background: white;
    color:#D2242E;
    transition: transform 0.3s ease, background-color 0.5s ease, color 0.5s ease;
}

.leftPrompt p{
    width: 90%;
    margin: auto;
    font-size: 14px;
}

.leftPrompt a:hover {
    transform: scale(1.1);
    background: #D2242E;
    color: white;
}

.leftPrompt a:hover+.leftPrompt {
    background-color: #ffffff;
}

.rightPrompt{
    color: #D2242E;
    background: white;
    flex: 1;
    transition: background-color 0.5s ease;
}

.rightPrompt a{
    display: block;
    border: solid 1px #D2242E;
    font-size: 16px;
    margin: auto;
    width: fit-content;
    padding: 10px 30px;
    border-radius: 10px;
    color: white;
    background:#D2242E;
    transition: transform 0.3s ease, background-color 0.5s ease, color 0.5s ease;
}

.rightPrompt p{
    width: 90%;
    margin: auto;
    font-size: 14px;
}
.rightPrompt a:hover {
    transform: scale(1.1);
}

.StatisticsPara{
    width: fit-content;
    margin: auto;
}

.Pie-Chart-Circle{
    display: flex;
    justify-content: center;
    align-items: center;}
  
.Pie-Chart-Circle::after{    
    margin-top: -140px;
    content: '';
    height: 110px;
    width: 110px;
    border-radius: 50%;
    background-color: #171717;}  

.Statistics-Pie-Chart{
    content: '';
    margin: auto;
    margin-top: 60px;
    padding: 20px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
  }

.Tag-Pie-Chart{
    content: '';
    margin: auto;
    margin-top: 60px;
    padding: 20px;
    height: 100px;
    width: 100px;
    border-radius: 50%;

}
  
.Legend{
    height: 15px;
    display: inline-block;
    width: 15px;   
    margin-right: 10px;
    top: 3px;
    position: relative;
}  
#solvedPuzzlesLegend{background: #2DB079;}
#unsolvedPuzzlesLegend{background: #D91D57;}

.unsolvedpercentageData{color:#D91D57;font-family: Lato;
    top: -150px;
    left: -95px;
    position: relative;
}
.solvedpercentageData{color: #2DB079;font-family: Lato;
    top: -202px;
    left: 180px;
    position: relative;
}

.gpercentageData,.rpercentageData,.bpercentageData,.wpercentageData,.brpercentageData{
font-family: Lato;
}

.gpercentageData{
    color:#2DB079;
}
.green{
    background:#2DB079;
}

.rpercentageData{
    color: #D91D57;
}
.red{
    background: #D91D57;
}

.bpercentageData{
    color:darkslateblue;
}
.blue{
    background:darkslateblue;
}

.wpercentageData{
    color:aliceblue;
}
.white{
    background: aliceblue;
}

.brpercentageData{
    color:sandybrown;
}
.brown{
    background: sandybrown;
}

.blocks{
    width: 20px;
    height: 20px;
}

.tagStatisticsDiv{
    display: flex;
    gap: 20px;
    margin: 20px 5px;
    font-size: 13px;
}

.pieDiv{
    display: flex;
    gap: 20px;
}


.tag{
    font-weight: 600;
    font-size: 11px;
    padding: 3px 5px;
    background: #BEE1F3;
    border-radius: 5px;
    color: #000080;
}
#tag1{ background: #2DB079;}
#tag2{ background: #D91D57;}
#tag3{ background: darkslateblue;}
#tag4{ background: aliceblue;}
#tag5{ background: sandybrown;}

.finalSection{
    display: flex;
}
.contactSection{
width:50%;
float:left;
}

.contactContent{
    width:80%;
    margin: auto;
    max-width: 600px;
}
.contactImage{
    float:left;
    padding: 20px;
    width: 120px;
    padding-left: 0px;
}

.contactImage2{
    float: left;
    padding: 20px;
    width: 28px;
    padding-top: 22px;
}

.contactImages{
    display: flex;
}

.left a{
    color:white;
}
.left a:hover{
    color:turquoise
}

#footerlinks{font-size: 12px;}
#footerlinks a{text-decoration: none;color:peachpuff;}
#footerlinks a:hover{cursor: pointer;}

#contactIconFacebook{
    font-size: 20px;
    padding: 15px;
    color: white;
    background: #488ACA;
    transition: 0.5s background-color ease,0.5s color ease;
}

.FacebookParagraph{
    border-radius: 0 8px 8px 0;
    border: solid 1px #488ACA;
    transition: 0.5s background-color ease,0.5s color ease;
}

.FacebookParagraph:hover{
    background: #488ACA;
    color:white;
    cursor: pointer;
}
.FacebookParagraph:hover #contactIconFacebook{
    background: white;
}

.FacebookParagraph:hover .contactIconFacebookPath{
    fill: #488ACA;
}

#contactIconTelegram{
    padding: 15px 12px;
    background: #27A3E2;
    transition: 0.5s background-color ease,0.5s color ease;
}


.TelegramParagraph{
    border-radius: 0 8px 8px 0;
    border: solid 1px #27A3E2;
    transition: 0.5s background-color ease,0.5s color ease;
}

.TelegramParagraph:hover{
    background: #27A3E2;
    color:white;
    cursor: pointer;
}
.TelegramParagraph:hover #contactIconTelegram{
    background: white;
}

.TelegramParagraph:hover .contactIconTelegramPath{
    fill: #27A3E2;
}

.InstagramParagraph{
    border-radius: 0 8px 8px 0;
    border: solid 1px #D2242E;
    transition: 0.5s background-color ease,0.5s color ease;
}

.InstagramParagraph:hover{
    background: #D2242E;
    color:white;
    cursor: pointer;
}
.InstagramParagraph:hover #contactIconInstagram{
    background: white;
}

.InstagramParagraph:hover .contactIconInstagramPath{
    fill: #D2242E;
}

#contactIconInstagram{
    padding: 12px;
    background: #D2242E;
    transition: 0.5s background-color ease,0.5s color ease;
}

.newsletterSection{
    float:left;
    width: 50%;
}

.newsletterPara{
    font-size: 25px;
    color:darkcyan;
    font-weight: 600;
    display: flex;
    gap: 10px;
}
.newsletterSection input{
    border: solid 1px sienna;
    outline: none;
    border-radius: 3px;
    padding: 5px 15px;
    width:250px;
    background-color: aliceblue;
    font-family: Catamaran;
    font-size: 14px;
    line-height: 30px;
}

.newsletterSection button{
    border: solid 1px saddlebrown;
    background: sandybrown;
    color:black;
    outline: none;
    border-radius: 3px;
    padding: 5px 15px;
    font-family: Catamaran;
    font-size: 14px;
    transition: transform 0.3s ease;
    margin: 10px;
}

.newsletterSection button:hover{
    transform: scale(1.1);
    cursor: pointer;
}
#typed-cursor {
    display: inline-block;
    font-weight: bold;
    font-size: 2rem;
    margin-left: 5px;
    animation: blink .7s infinite steps(1,end);
    border-right: solid 1px white;
    height: 35px;
    margin-top: -15px;
  }

#typed-cursor-2 {
    display: inline-block;
    font-weight: bold;
    font-size: 2rem;
    margin-left: 5px;
    animation: blink .7s infinite steps(1,end);
    border-right: solid 1px #D2242E;
    height: 35px;
    margin-top: -15px;
}
  
  @keyframes blink {
    50% {border-color: transparent;}
  }

.h1Container{
    display: flex;
    max-width: fit-content;
    margin: auto;
    align-items: center;
}  
  
.editComplete{
    position: fixed;
    top: 70%;
    background: #313942;
    color: white;
    right: -99%;
    padding: 5px 10px 6px 10px;
    border-radius: 5px 0 0 5px;
    font-size: 12px;
    transition: all 0.5s ease;
}

.FacebookParagraph, .TelegramParagraph, .InstagramParagraph{
    display: flex;
    align-items: center;
}

.diamond img{
    width: 18px;
    margin: auto;
}
.puzzleComplete{
    background: #e6faf5;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
}