KanyeGuess.css

/* 
  ________                                  .__                 .__                        __          
 /  _____/  ____   ____   ________________  |  |   _______ __ __|  |   ____   ______ _____/  |_  ______
/   \  ____/ __ \ /    \_/ __ \_  __ \__  \ |  |   \_  __ \  |  \  | _/ __ \ /  ___// __ \   __\/  ___/
\    \_\  \  ___/|   |  \  ___/|  | \// __ \|  |__  |  | \/  |  /  |_\  ___/ \___ \\  ___/|  |  \___ \ 
 \______  /\___  >___|  /\___  >__|  (____  /____/  |__|  |____/|____/\___  >____  >\___  >__| /____  >
        \/     \/     \/     \/           \/                              \/     \/     \/          \/ 
*/

input[type="button"]:hover{
  cursor: pointer;
}

@font-face {
  font-family: Poppins;
  src: url(./Fontfaces/Regular.ttf);
}

@font-face {
  font-family: PoppinsBold;
  src: url(./Fontfaces/Bold.ttf);
}

* {
  font-family: Poppins;
  box-sizing: border-box;
  text-align: center;
  background-color: #181818;
  color: white;
  align-items: center;
}

a{
  font-weight: bold !important;
  background-color: transparent !important;
}

#logo{
  width: 70%;
  transition: transform .2s;
  align-items: center;
  width: 90%;
}

::selection {
  background-color: #b37a00; 
  color: #ffffff;
}

::-moz-selection {
  background-color: #b37a00;
  color: #ffffff;
}

#instagramButton{
  margin-top: 5px;
}
#instagramButton:hover{
  cursor: pointer;
}

#playAgainButton,
#shareButton{
  margin-top: 5px;
}

/* Overlay background */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
/* Overlay content box */
.overlay-content {
  font-family: Poppins;
  width: 70%;
  max-width: 500px;
  padding: 20px;
  background-color: #242424;
  color: #ffffff;
  font-weight: bold;
  border-radius: 10px;
  text-align: left;
  line-height: 1.5;
}
/* Overlay title */
.overlay-title {
  margin-top: 7.5px;
  background-color: #242424;
  text-align: left;
}
/* Overlay paragraph */
.overlay-paragraph {
  font-family: Poppins;
  font-size: 12pt;
  background-color: #242424;
  text-align: left;
  font-weight: lighter;
}
/* Overlay close button */
.overlay-close-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #333;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-family: Poppins;
}
.overlay-close-btn:hover{
  cursor: pointer;
}

/* Overlay thicc text */
.overlayThicc{
  background-color: transparent;
}

#gameOverlayContent{
  max-width: 307.5px;
}

img{
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#instagramButton{
  background: linear-gradient(45deg, #C13584, #E1306C, #F77737, #FCAF45);
  color: white;
  border: none;
  transition: background 0.3s ease;
}

#instagramButton:hover {
  background: linear-gradient(45deg, #FCAF45, #F77737, #E1306C, #C13584); /* Gradiente invertito al passaggio del mouse */
}

#settingsParagraph{
  display: block !important;
  text-align: left;
}

#sonicCD div {
  display: flex;
  align-items: center; /* Allinea input e label nella stessa riga */
  justify-content: flex-start; /* Allinea contenuto a sinistra */
  width: 100%;
  background-color: #242424;
}

.sonicLabel{
  background-color: #242424;
}

.sonicTextBox{
  margin-right: 10px;
}

.sonicTextBox{
  width: 30px;
  border: 1px;
}

#switchDiv div {
  display: flex;
  align-items: center; /* Allinea input e label nella stessa riga */
  justify-content: flex-start; /* Allinea contenuto a sinistra */
  width: 100%;
  background-color: #242424;
}

.switch {
  background-color: #242424 ;
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  margin-right: 10px;
  margin-bottom: 5px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(29px);
  -ms-transform: translateX(29px);
  transform: translateX(29px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#clara{
  background-color: transparent;
  font-weight: normal !important;
}

#skip,
#submit,
#hint{
  font-family: Poppins;
  font-size: 12pt;
  border-radius: 12.5px;
  border-color: white;
  width: 90px;
}

#instagramLow{
  text-align: center;
  font-family: Poppins;
  font-size: 32px;
  height: 32px;
  width: 32px;
  border-radius: 5px;
  border: none;
  background-image: url("./Assets/Instagram.jpg"); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#settings{
  text-align: center;
  font-family: Poppins;
  font-size: 32px;
  height: 32px;
  width: 32px;
  border-radius: 5px;
  border: none;
  background-image: url("./Assets/Settings.png"); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-color: white;
}

#mode{
  width: 100%;
  font-family: Poppins;
  font-size: 12pt;
  border-radius: 12.5px;
  border-color: white;
  border-width: 2px;
  margin-bottom: 10px;
}

#kanye-songs {
  width: 60%;
  font-family: 'Poppins', sans-serif;
  font-size: 14pt;
  height: 51px;
  padding: 8px;
  border-radius: 12.5px;
  border: 2px solid rgb(255, 255, 255);
  margin-bottom: 10px;
  background-color: #181818;
  color: #fff;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
#kanye-songs:focus {
  border-color: #fff;
  background-color: #242424; 
}
#kanye-songs:hover{
  cursor: text;
}

#bottomL{
  display: block;
  text-align: left;
  position: absolute;
  left: 20px;
  bottom: 0.01px;
}

#bars {
  width: 100%;
  background-color: rgb(32, 32, 32);
  font-size: 12pt;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

#share{
  display: block;
  text-align: center;
  font-family: Poppins;
  font-size: 12pt;
  border-radius: 12.5px;
  border-color: white;
  display: flex; 
  margin-bottom: 10px;
  justify-content: center;
}

#insp{
  margin-top: 2px;
}

#miniPulsanti{
  text-align: left;
}
/* 
   _____        ___.   .__.__          
  /     \   ____\_ |__ |__|  |   ____  
 /  \ /  \ /  _ \| __ \|  |  | _/ __ \ 
/    Y    (  <_> ) \_\ \  |  |_\  ___/ 
\____|__  /\____/|___  /__|____/\___  >
        \/           \/             \/ 

*/

/* Mobile */ @media only screen and (max-width: 954px) { /* Mobile */
  #logo{
    width: 95%;
  }
  #logo:hover{
    cursor: pointer;
    transform: scale(1.05);
  }

  #kanye-songs {
    width: 60%;
  }
}

/* 
___________________  
\______   \_   ___ \ 
 |     ___/    \  \/ 
 |    |   \     \____
 |____|    \______  /
                  \/ 
*/

/* PC */ @media only screen and (min-width: 955px) { /* PC */
  #streak,
  #vite,
  #skipp{
    font-size: 12pt;
  }
  
  p{
    font-family: Poppins;
    font-size: 12pt;
    text-align: center;
    background-color: transparent;
  }

  label{
    font-family: Poppins;
    font-size: 14pt;
    text-align: center;
  }
  
  #kanye-songs {
    width: 45%;
  }

  #logo:hover{
    cursor: pointer;
    transform: scale(1.05);
  }

  #gameOver{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}