/*
 Theme name:   Maintenance
 Theme:		   Maintenance
 Description:  Maintenance theme for quicksalt.com website
 Author:       Codalistic
 Designer URI: https://codalistic.com
 Version:      1.1.0
*/

:root {
	--primary-color: #000;
	--background-color: #FFF;
	--body-height: calc(100vh - 5.2rem - 4rem);
	--animation-rotation-time: 3s;
	--animation-stop-time: 0.25s;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
	position: relative;
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: 'azonixregular';
	src: url('../fonts/azonix-webfont.woff2') format('woff2'),
		 url('../fonts/azonix-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}


html, body {
    min-width: 320px;
    width: 100%;
}

body {
    grid-template-rows: none;
	font-family: Arial;
	font-size: 16px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

header {
    background-color: var(--primary-color);
    display: grid;
    grid-auto-rows: min-content;
    grid-template-columns: auto minmax(320px, 1280px) auto;
	height: 5.2rem;
}

header a {
	color: var(--background-color);
	grid-column-start: 2;
	margin-top: 0.6rem;
	text-decoration: none;
}
header a * {
	display: inline;
}

footer {
    background-color: var(--primary-color);
    display: grid;
    grid-template-columns: auto minmax(320px, 1280px) auto;
	height: 4rem;
}

h1 {
	font-size: 3rem;
}

.codalistic {
	font-family: 'azonixregular', Arial, sans-serif;
	font-weight: normal;
	background-color: #000;
	color: #FFF;
	text-decoration: none;
}
.codalistic:hover {
	color: #000;
	background-color: #0F0;
}

.maintenance {
    display: grid;
    grid-template-columns: auto 300px auto;
    grid-template-rows: min-content auto;
    grid-row-gap: 1rem;
	min-height: var(--body-height);
	background-color: var(--background-color);
}

.maintenance span {
    grid-column: 1/4;
    text-align: center;
    grid-row: 2;
}

.maintenance .wheels {
    display: grid;
    align-items: center;
    margin-top: 20vh;
    height: min-content;
    grid-template-columns: 0.925fr 0.075fr 1.425fr;
    grid-column-start: 2;
    grid-column-end: 3;
}

.big-wheel,
.small-wheel {
    display: block !important;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    grid-row: 1;
	background-image: radial-gradient(var(--primary-color) 0%,var(--primary-color) calc(0.7071 * 99%), var(--background-color) calc(0.7071 * 100%), var(--background-color) 100%);
	-webkit-mask-size: contain;
	mask-size: contain;
}

.big-wheel:before,
.small-wheel:before {
    content: "";
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
}

.big-wheel {
    animation: turn-big var(--animation-rotation-time) linear infinite;
    grid-column: 2 / 4;
	-webkit-mask-image: url(../images/gear-wheel1.png);
	mask-image: url(../images/gear-wheel1.png);
}
.small-wheel {
    animation: turn-small calc(0.8 * var(--animation-rotation-time)) linear infinite;
    grid-column: 1 / 3;
    transition: rotate(0deg) 0.2s;
	-webkit-mask-image: url(../images/gear-wheel2.png);
	mask-image: url(../images/gear-wheel2.png);
    transform: rotate(25deg);
}

.big-wheel.inverted:before {
    filter: invert(100%);
}
.small-wheel:before {
    background-image: url("../images/codalistic_logo.png");
	transform: rotate(-25deg);
}

.wheels:hover .small-wheel {
    animation: stop-small var(--animation-stop-time) ease-out 1;
}
.wheels:hover .big-wheel {
    animation: stop-big var(--animation-stop-time) ease-out 1;
}

@keyframes turn-big {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes turn-small {
    0% {
        transform: rotate(25deg);
    }
    100% {
        transform: rotate(385deg);
    }
}

@keyframes stop-big {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes stop-small {
    0% {
        transform: rotate(475deg);
    }
    100% {
        transform: rotate(25deg);
    }
}