/* CSS Document */

/* <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900*/

.inter-<uniquifier> {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Fredoka+One');

:root {
  --color-bg: #5C419A;
  --color-primary: #EF5B7E;
  --color-secondary: #59C2AA;
  --size-logo: 10rem;
  --font-family: 'Fredoka One', sans-serif;
  --animation-speed: 90s;
}

body {
  /*display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: space-around;
  align-items: center;
  background-color: var(--color-bg);*/
}

.logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: var(--size-logo);
  height: var(--size-logo);
  color: var(--color-bg);
  font-size: calc(var(--size-logo) * .65);
  font-weight: bold;
  font-family: var(--font-family);
  user-select: none;
  margin:30px auto;
  
  &::after,
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    border-radius: calc(var(--size-logo) * .3);
    mix-blend-mode: color-dodge;
  }
  
  &::before {
    background-color: var(--color-primary);
    transform: rotate(-30deg);
    z-index: -2;
    animation: rotate1 var(--animation-speed) linear infinite;
  }
  
  &::after {
    background-color: var(--color-secondary);
    transform: rotate(20deg);
    z-index: -1;
    animation: rotate2 calc(var(--animation-speed) * .9) linear infinite;
  }
}

@keyframes rotate1 {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(330deg);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(380deg);
  }
  to {
    transform: rotate(20deg);
  }
}



.container2 {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }
        .item {
            flex: 1 1 100%; /* Default to full width */
            box-sizing: border-box;
            padding: 10px;
        }
        @media (min-width: 600px) {
            .item {
                flex: 1 1 50%; /* 2 columns on medium screens */
            }
        }
        @media (min-width: 900px) {
            .item {
                flex: 1 1 33.33%; /* 3 columns on large screens */
            }
        }
    @media (min-width: 1200px) {
            .item {
                flex: 1 1 25%; /* 3 columns on large screens */
            }
        }

:after,
:before,
*{
    box-sizing: border-box;
}
.container {
  width:1200px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
body {
	 background-color: var(--color-bg);
  margin: 0;
  /*font-family: 'Rajdhani', sans-serif;*/
font-family: "Inter", serif;

  font-weight: 400;
  }

h2 {
      line-height:1.1; font-weight:900
}


.mainContainer {display:block; width:1480px; max-width:100%; margin:0 auto}

h1,h2,h3,h4 {display:block; margin:15px 0;}
h3 {font-size: 25px;    font-weight: 900;    letter-spacing: -0.5px;}

p { display:block; font-size:15px; margin:10px 0; line-height:20px}


/*APP LIST*/

#appList article {display: inline-block; width:24%; margin:20px 0.2%; vertical-align:top; background:#fff; padding:20px; border-radius:18px;}
#appList article img {max-width:100%}