@import url('https://fonts.googleapis.com/css2?family=Joti+One&display=swap');

    /* SQUARE */
:root{
--SQUARE-BGCOLOR: papayawhip;
--SQUARE-SIZE: max(75px, 15vw)
}

.joti-one-regular {
  font-family: "Joti One", serif;
  font-weight: 400;
  font-style: normal;
}

html,body{
    height: 100%;
    margin: 0;
    padding: 20px;
}

body{
    min-height: 100vh;
    background-image: url(../img/ToonTownBG.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-size: 2rem;
    font-family: "Joti One", serif;
}


header{
    display: grid;
    justify-content: center;
    font-size: 4rem;
    text-shadow: 2px 2px 5px #fff;
}

main{
    flex-grow: 1;

    padding: 10px 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-flow: row wrap;
    gap: min(4vw, 15px);
}

.square{
    border-radius: 60px;
    padding: 50px;
    background-color: var(--SQUARE-BGCOLOR);
    width: var(--SQUARE-SIZE);
    height: var(--SQUARE-SIZE);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.square a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.square img{
    display: block;
    max-width: 80%;
    margin: 0;
    height: auto;
    object-fit: contain;
}

a{
    color: black;
    text-decoration: none;
    cursor: pointer;
}

a:visited{
    color: black;
}

a:hover{
    color: aliceblue;
    text-decoration: none;
}

.game-link{
    text-decoration: underline;
}

div{
    text-shadow: 2px 2px 5px aliceblue;
}


div:nth-child(1){
    background-color: rgb(247, 78, 78);
    border-radius: 90px 45px 50% 80px;
}

div:nth-child(2){
    background-color: rgb(30, 132, 210);
    border-radius: 100px 75px 100px 55px;
}

.large-image {
  width: 200px;   /* Set desired width */
  height: auto;   /* Keeps aspect ratio */
}

div:nth-child(3){
    background-color: rgb(108, 185, 41);
    border-radius: 66px 80px 55px 90px;
}
div:nth-child(4){
    background-color: rgb(30, 210, 171);
    font-size: 8rem;
    border-radius: 66px 80px 120px 90px;
}
div:nth-child(5){
    background-color: rgb(235, 103, 191);
    font-size: 8rem;
}
div:nth-child(6){
    background-color: rgb(81, 68, 196);
}

.ToonTown-Page{
    background-image: url(../img/PlaygroundBGs/ttr-screenshot-_DonaldsDock_-Wed-Aug-13-20-47-29-2025-72258.png);
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    font-family: Georgia, 'Times New Roman', Times, serif
}

.Daisys-Garden{
    background-image: url(../img/PlaygroundBGs/ttr-screenshot-_DaisysGarden_-Wed-Aug-13-20-46-33-2025-65376.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.vasock{
    width: 20%;
    position: absolute;
    top: 50%;
    right: 5rem;
    transform: translateY(-50%);
}

.CoolJazzy{
    float: left;
    width: 45%;
    padding-left: 50px;
    padding-right: 50px;
    height: auto;
}

.Dva-Quote{
    color: pink;
}

.MinniesMelodyLand{
    background-image: url(../img/PlaygroundBGs/ttr-screenshot-_MinniesMelodyLand_-Wed-Aug-13-20-50-13-2025-91353.png);
    background-size: cover;
    background-repeat: no-repeat;

        font-family: Georgia, 'Times New Roman', Times, serif;
}   

.MinniesMelodyLand img {
    float: right;
    width: 35%;
    padding-left: 50px;
    padding-right: 50px;
    height: auto;
}

mark{
    background-color: rgba(255, 255, 255, 0.657);
}

.TheBrrgh{
    background-image: url(../img/PlaygroundBGs/ttr-screenshot-_TheBrrgh_-Wed-Aug-13-20-49-14-2025-84733.png);
}

.TheBrrgh img{
    width: 35%;
    position: absolute;
    top: 55%;
    right: 5rem;
    transform: translateY(-50%);
}

.DonaldsDreamLand{
    background-image: url(../img/PlaygroundBGs/ttr-screenshot-_DonaldsDreamland_-Wed-Aug-13-20-51-46-2025-102249.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.PFP{
    width: 20%;
    position: absolute;
    top: 60%;
    border-radius: 50%;
}