CBeebies stylesheet.css

@font-face {
    font-family: "Tiresias Infofont";
    src: url("./Tiresias_Infofont.ttf");
}


:root{ /* My own variables! */
    /* These variables can be used anywhere in the code! */
    /* They must start with -- */
    --centre: center; /* I need it to accommodate British spelling. */
    --sky: #00c0ff;
    --ocean: #00809c;
    --font-size: 35px;
    --left-and-right·spacing: 20%;
    --fonts: "Tiresias Infofont"; /* Might add substitution fonts */
    --text-colour: white;
    --CBeebies-yellow: #ffe400;
    --CBeebies-purple: #462682;
    --global-cursor-state: none;
}

.tooltip .tooltiptext {
    visibility: hidden;    
    color: var(--text-colour);
    text-align: center;
    padding: 0.5%;
    border-color: #202020;
    background-color: #404040;
    border-style: solid;
    border-width: 2px;
    border-radius: 6px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}


body, html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    color: var(--text-colour);
    font-size: var(--font-size);
    text-align: left;
    font-family: var(--fonts);
    overflow: hidden; /* disables scrolling */
    background-color: var(--sky);
    /* I want people to stare at that screen, remembering how scary it was for them when they were younger. */
    cursor: var(--global-cursor-state);
}
---- { /* Odd, but valid CSS*/
    /* You can have 2 or more hyphens! */
    --: --; /* this does nothing. */
}
.CBeebies sky, .CBeebies ocean { /* Even no-break spaces are allowed in CSS variable names!
    /* It's a different space! */
    height: 70%;
    background-color: var(--sky);
    padding-left: var(--left-and-right·spacing);
    padding-right: var(--left-and-right·spacing);
    top: 1px;
}

.CBeebies ocean {
    /* ocean margin */
    height: 100%; /* Can be higher than 30% (> 30%; not ≥ 30%)*/
    background-color: var(--ocean);
    padding-top: 2.5%;
}

#©·Mehdical·Man{
    background-color: black;
    text-align: var(--centre);
    padding: 0px;
}
#Mehdical Manǃ /* Using non-ASCII is allowed.*/ {
    /* Space between CBeebies logo and bedtime message. */
    margin-top: 2%;
}

.CBeebies SVG {
    POSITION: relative; /*Properties can also be in capital letters.*/
    top: 15%;
    left: 50%;
    user-select: None; /*Heh, Python None.*/
    transform: translate(-50%, -50%) scale(0.5);
    max-width: 100%;
    text-align: var(--centre);
}

.CBeebies HD SVG {
    POSITION: relative; /*Properties can also be in capital letters.*/
    top: 15%;
    margin-bottom: 40px;
    left: 50%;
    user-select: None; /*Heh, Python None.*/
    transform: translate(-50%, -50%) scale(0.75);
    max-width: 100%;
    text-align: var(--centre);
}

.hidden·hyperlinkǃ {
    /* I want people to appreciate the “This Is CBeebies” page
    without the default hyperlink style ruining the aesthetic. */
    color: var(--text-colour);
    text-decoration: none;
    cursor: var(--global-cursor-state);
}

/* People will accidentally discover that “cbeebies.co.uk” is a functioning link when hovering over it. */
.hidden·hyperlinkǃ:hover {
    background-color: var(--CBeebies-yellow);
    color: var(--CBeebies-purple);
    text-decoration: underline;
}

@media screen and (max-width: 1500px)  and (min-width: 1200px){
    body, html {
        font-size: calc(30px);
    }
    .CBeebies sky, .CBeebies ocean  { /* Even no-break spaces are allowed in CSS variable names!
        /* It's a different space! */
        margin-top: 12%;
        padding-left: 15%;
        padding-right: 15%;
    }
}


@media  screen and (max-width: 1200px) and (min-width: 0px){
    body, html {
        font-size: 50px;
    }
    .CBeebies sky, .CBeebies ocean  {
        /* It's a different space! */
        padding-left: 10%;
        padding-right: 10%;
    }

    #Mehdical Manǃ {
        margin-top: 16%;
    }
    
    .CBeebies sky {
        height: 65%;
    }
    
    .CBeebies ocean {
        height: 145%;
        padding-top: 5%;
    }
    
}


@media screen and 

div {
    overflow: hidden;
}