@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url(spacing.css);
@import url(titles.css);
@import url(circular.css);

@import url(tiles/alarm.css);
@import url(tiles/calendar.css);
@import url(tiles/cars.css);
@import url(tiles/curtains.css);
@import url(tiles/energy.css);
@import url(tiles/lights.css);
@import url(tiles/music.css);
@import url(tiles/thermostat.css);
@import url(tiles/weather.css);

html, body {
    background: radial-gradient(#0b0b4d, #070721);
    color: white;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family: 'Open Sans';
}

#pages {
    position: absolute;
    margin-left: 25px;
    margin-top: 25px;
    width: calc(100% - 50px);
    height: calc(100% - 50px);
}

#pages > .page {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px 10px;
    height: 100%;
    width: 100%;
    position: absolute;
}

#pages > .page > .fade {
    position: absolute;
    width: calc(100% + 50px);
    height: calc(100% + 50px);
    margin-left: -25px;
    margin-top: -25px;
    z-index: 2;
    display: none;
    background: rgba(0, 0, 0, 0.3);
}

#pages > .page > .tile {
    position: relative;
    perspective: 1500px;
    z-index: 1;
    transition: z-index 1s;
}

#pages > .page > .tile:hover {
    z-index: 2;
}

.tile.weather .tile-front {
    background: linear-gradient(323deg, #17175b, #0b0b2f);
    border-radius: 10px;
}

.tile.calendar .tile-front {
    background: linear-gradient(0deg, #17175b, #0f0f43);
}

.tile.cars .tile-front {
    background: linear-gradient(50deg, #17175b, #0b0b2f);
}

.tile.lights .tile-front {
    background: linear-gradient(270deg, #17175b, #0f0f3d)
}

.tile.music .tile-front {

}

.tile.energy .tile-front {
    background: linear-gradient(90deg, #17175b, #0f0f3d)
}

.tile.thermostat .tile-front {
    background: linear-gradient(222deg, #17175b, #0b0b2f);
}

.tile.curtains .tile-front {
    background: linear-gradient(180deg, #17175b, #0f0f43)
}

.tile.alarm .tile-front {
    background: linear-gradient(138deg, #17175b, #0b0b2f);
}

#pages > .page > .tile .content {
    position: absolute;
    margin-left: 30px;
    margin-top: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
}

#pages > .page > .tile .content .tile-width {
    margin-left: -30px;
    width: calc(100% + 60px);
}

#pages > .page > .tile .columns {
    display: flex;
}

#pages > .page > .tile .columns > .column {
    flex: 1 0;
    position: relative;
}

/* This container is needed to position the front and back side */
.tile-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 700ms, margin 700ms;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.tile.flipped {
    z-index: 10 !important;
}

.tile.flipped .tile-inner {
    z-index: 10;
    transform: rotateY(180deg) scale(2.5);
}

/* Position the front and back side */
.tile-front, .tile-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 10px;
}

/* Style the back side */
.tile-back {
    background-color: #1c1c72;
    color: white;
    transform: rotateY(180deg);
}